<template>
<div class="change-log">
  <div v-loading="loading" v-if="refresh==='changeLog'">
    <el-row class="filter-tab">
      <el-col :span="24">
        <div class="right">
          <el-button type="text" class="refre" :loading="loading" @click.stop="refreshBtn"><i v-if="!loading" class="iconfont icon-shuaxin"></i></el-button>
          <el-dropdown trigger="click" @command="handleCommandTime" class="opration" size="small">
          <span class="el-dropdown-link">
            {{$t('customer.changeLogUser')}}: <span class="ellipsis filter-time-name">{{filterTimeName}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in agents" :command="item.type">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click" @command="handleCommandType" size="small">
          <span class="el-dropdown-link">
          {{$t('public.type')}}: <span>{{filterTypeName}}</span><i class="el-icon-arrow-down el-icon--right" m7automation="log_type"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in businessType" :command="item.type">{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <ul style="padding-top: 25px">
          <template v-for="con in cons" >
            <li v-if="con.detail==1" class="treat" :class="cons.length === 1 ? 'none-line' : ''">
              <span class="bac"><span style="padding-right: 18px">{{con.time}}</span></span>
              <p>{{con.sort}}</p>
              <h3 v-for="sta in con.status">{{sta}}</h3>
            </li>
            <li v-if="con.detail==2" class="treat">
              <span class="bac d-bac"></span>
              <i></i>
              <h3 class="date date1">
                <!--<span>{{con.sort}}</span>{{con.status}}-->
                {{con.date}}
              </h3>
            </li>
          </template>
        </ul>
        <div v-if="cons.length ===0" class="no-data">{{$t('public.noData')}}</div>
      </el-col>
    </el-row>
    <el-row v-if="isLoadMoreShow">
      <el-col class="next-page">
        <div class="btn" @click.stop="loadMore"><span>{{$t('public.loadMore')}}</span></div>
      </el-col>
    </el-row>
  </div>
  <!--通话标签的操作日志-->
  <div v-if="labelOperaHistory" class="lable-opera">
    <el-row>
      <el-col :span="24">
        <ul class="lable-history-wrap">
          <template v-for="item in newLabelOpearHistory" >
            <li class="treat treat2" :class="cons.length === 1 ? 'none-line' : ''">
              <span class="bac d-bac"><span style="padding-right: 18px">{{item.time}}</span></span> <!--小球，里面是日期-->
              <span class="label-operatior">{{getAgentName(item.operator)}}</span>&nbsp;<!--6689-->
              <span v-if="item.opertaion ==='add'">{{$t('call.hadAddLabel')}}</span><!--新建了标签-->
              <span v-else-if="item.opertaion ==='delete'">{{$t('call.hadDelLabel')}}</span>
              <span v-else>{{$t('call.hadRecoverLabel')}}</span>&nbsp;[
              <span class="label-color">{{item.opertaion === 'recover'?getRecoverName(item.name):item.name[0]}}</span>] <!--通话一级标签-通话二级标签-通话三级标签-->
            </li>
          </template>
        </ul>
      </el-col>
    </el-row>
  </div>
</div>
</template>
<script>
  import {getCache, timeFormat} from '@/utils/m7Utils.js'
  export default {
    name: 'changeLog',
    data () {
      return {
        LIMIT: 20,
        loading: true,
        businessType: [
          { type: '', name: this.$t('public.all') },
          { type: 'add', name: this.$t('customer.changeLogType.add') },
          { type: 'import', name: this.$t('customer.changeLogType.import') },
          { type: 'update', name: this.$t('customer.changeLogType.update') },
          { type: 'updateStatus', name: this.$t('customer.changeLogType.updateStatus') },
          { type: 'updateOwner', name: this.$t('customer.changeLogType.updateOwner') },
          { type: 'updateSource', name: this.$t('customer.changeLogType.updateSource') },
          { type: 'assign', name: this.$t('customer.changeLogType.assign') },
          { type: 'batchUpdateStatus', name: this.$t('customer.changeLogType.batchUpdateStatus') },
          { type: 'claim', name: this.$t('customer.changeLogType.claim') },
          { type: 'autoAssignPool', name: this.$t('customer.changeLogType.autoAssignPool') },
          { type: 'recyclePool', name: this.$t('customer.changeLogType.recyclePool') },
          { type: 'changePool', name: this.$t('customer.changeLogType.changePool') },
          { type: 'updateSysStatus', name: this.$t('customer.changeLogType.updateSysStatus') },
          { type: 'mergeCust', name: this.$t('customer.changeLogType.mergeCust') }
        ],
        agents: [
          { type: '', name: this.$t('public.all') },
          { type: 'system', name: this.$t('public.system') }
        ],
        filterTime: '',
        filterType: '',
        cons: [],
        data: {
          cid: this.cid,
          limit: this.LIMIT,
          page: 1
        },
        changeLog: '',
        isLoadMoreShow: false
      }
    },
    props: {
      cid: String,
      refresh: String,
      labelOperaHistory: Array,
      type: String,
      refreshBusRight: Number
    },
    watch: {
      refresh (cur, old) {
        if (cur === 'changeLog') {
          let data = {
            cid: this.cid,
            limit: this.LIMIT,
            page: 1
          }
          this.filterType = ''
          this.filterTime = ''
          this.data = data
          this.fetchData()
        }
      },
      refreshBusRight (cur, old) {
        if (cur && this.refresh === 'changeLog') {
          let data = {
            cid: this.cid,
            limit: this.LIMIT,
            page: 1
          }
          this.filterType = ''
          this.filterTime = ''
          this.data = data
          this.fetchData()
        }
      },
      cid (cur, old) {
        if (cur !== '' && this.type === 'webchatNewOperation') {
          let data = {
            cid: this.cid,
            limit: this.LIMIT,
            page: 1
          }
          this.filterType = ''
          this.filterTime = ''
          this.data = data
          this.fetchData()
        }
      }
    },
    computed: {
      filterTypeName () {
        let that = this
        return this.businessType.filter(val => {
          return val.type === that.filterType
        })[0].name
      },
      filterTimeName () {
        let that = this
        return this.agents.filter(val => {
          return val.type === that.filterTime
        })[0].name
      },
      newLabelOpearHistory () { // 对数据进行分日期显示处理
        let list = this.labelOperaHistory
        let changeLog = {}
        list.forEach((log) => {
          let date = log.operateTime.split(' ')[0]
          let time = log.operateTime.split(' ')[1]
          time = `${time.split(':')[0]}:${time.split(':')[1]}`
          let datetime = `${date} ${time}`
          let formatLog = {
            date,
            time,
            datetime,
            operator: log.operator,
            opertaion: log.opertaion,
            name: log.name
          }
          if (changeLog[date]) {
            changeLog[date].push(formatLog)
          } else {
            changeLog[date] = []
            changeLog[date].push(formatLog)
          }
        })
        let valArr = []
        let indexArr = []
        for (let key in changeLog) {
          valArr.push(changeLog[key])
          indexArr.push(key)
        }
        let i = 0
        let j = 0
        let newData = []
        for (; i < indexArr.length; i++) {
          let obj = {}
          for (j = 0; j < valArr[i].length; j++) {
            obj = {
              time: timeFormat(valArr[i][j].datetime, ''),
              operator: valArr[i][j].operator,
              name: valArr[i][j].name,
              opertaion: valArr[i][j].opertaion,
              detail: 1
            }
            newData.push(obj)
          }
          // let is = indexArr[i].split('-')
          // obj = { // 不同的月日
          //   time: '&nbsp;',
          //   sort: `${is[1]}/`,
          //   status: is[2],
          //   detail: 2
          // }
          // newData.push(obj)
        }
        return newData
      }
    },
    methods: {
      handleCommandTime (command) {
        this.filterTime = command
        this.fileContactHistory()
      },
      handleCommandType (command) {
        this.filterType = command
        this.fileContactHistory()
      },
      getAgentName (id) {
        let obj = getCache('agents', id)
        if (obj) {
          return obj.displayName
        } else {
          return ''
        }
      },
      getRecoverName (name) {
        let nameStr = ''
        for (let m = 0; m < name.length; m++) {
          nameStr += name[m] + '、'
        }
        return nameStr.substring(0, nameStr.length - 1)
      },
      initDataByCid () {
        if (this.cid && this.refresh === 'changeLog') {
          let data = {
            cid: this.cid,
            limit: this.LIMIT,
            page: 1
          }
          this.data = data
          this.fetchData()
          this.nextPage = 1
        }
      },
      refreshBtn () {
        this.data.page = 1
        this.fetchData()
      },
      fileContactHistory () {
        let data = {
          type: this.filterType,
          user: this.filterTime,
          cid: this.cid,
          limit: this.LIMIT,
          page: 1
        }
        this.data = data
        this.fetchData()
      },
      loadMore () {
        this.data.page++
        this.fetchData(true)
      },
      fetchData (isLoadMore) {
        this.loading = true
        return this.$store.dispatch('queryCustomerChangeLog', this.data).then(resp => {
          let val = resp.changeLog
          let count = resp.count
          if (count === this.LIMIT) {
            this.isLoadMoreShow = true
          } else {
            this.isLoadMoreShow = false
          }
          let valArr = []
          let indexArr = []
          for (let key in val) {
            valArr.push(val[key])
            indexArr.push(key)
          }
          console.log(val)
          let i = 0
          let j = 0
          let cons = []
          for (; i < indexArr.length; i++) {
            let obj = {}
            for (j = 0; j < valArr[i].length; j++) {
              let content = valArr[i][j].content.split('|')
              let change = this.$t(valArr[i][j].desc)
              console.log(valArr[i][j])
              obj = {
                time: timeFormat(valArr[i][j].datetime, ''),
                sort: `${valArr[i][j].user} ${change}`,
                status: content,
                detail: 1
              }
              cons.push(obj)
            }
//            let is = indexArr[i].split('-')
//            obj = {
//              time: '&nbsp;',
//              sort: `${is[1]}/`,
//              status: is[2],
//              date: indexArr[i],
//              detail: 2
//            }
//            cons.push(obj)
          }
//          for (let i = 0; i < valArr.length; i++) {
//            let obj = {}
//            let content = valArr[i].content
//            let change = this.$t(valArr[i].desc)
//            console.log(valArr[i])
//            obj = {
//              time: valArr[i].time,
//              sort: `${valArr[i].user} ${change}`,
//              status: content,
//              detail: 1
//            }
//            cons.push(obj)
//          }
          if (isLoadMore) {
            let lastObj = this.cons[this.cons.length - 1]
            let hasDate = false
            for (let i = 0; i < cons.length; i++) {
              if (cons[i].sort === lastObj.sort && cons[i].status === lastObj.status) {
                hasDate = true
                break
              }
            }
            if (hasDate) {
              this.cons.pop()
            }
            this.cons.push(...cons)
          } else {
            this.cons = cons
          }
          this.loading = false
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', { type: 'agents' }).then(agents => {
        agents.map(agent => {
          this.agents.push({
            type: agent._id,
            name: agent.displayName + '[' + agent.exten + ']'
          })
        })
        this.initDataByCid()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .change-log
    height 100%
    .filter-tab
      /*margin 0 0 30px -56px*/
      padding 0 12px 12px
      &:before
        content ''
        height 1px
        width calc(100% + 40px)
        position absolute
        top 29px
        left -20px
        border-bottom 1px solid $c-border2
      .til
        color $cf-gray3
        .icon-zongshichang
          color $cf-gray5
      .right
        float right
        .opration
          margin-right 20px
        .el-dropdown-link
          color $c-main
          cursor pointer
    .lable-history-wrap
      height 320px
      overflow auto
    ul
      padding 0 20px
    .no-data
      margin-top 20px
      color $cf-gray4
    .refre
      color $c-main
      display inline-block
      padding 0 12px 0 0
      .iconfont
        font-size 14px
    .treat
      position relative
      padding 20px 0 0 25px
      margin-left 120px
      border-left 1px solid $c-border2
      .label-color
        color $c-sub
        padding 0 4px
        word-break break-all
      i
        position absolute
        display inline-block
        width 30px
        border-bottom 1px solid $c-border2
        top 26px
        left 8px
      img
        position relative
        top -4px
        margin 0 4px
      span
        display inline-block
      .bac
        font-size 12px
        width 142px
        height 12px
        line-height 14px
        position absolute
        top 23px
        left -136px
        padding 1px 0
        background $cf-white
        color $cf-gray4
        text-align right
        &:before
          content ""
          width 11px
          height 11px
          display inline-block
          float right
          border-radius 50%
          background-color $c-border2
        &:after
          content: '';
          position: absolute;
          margin-left: 5px;
          width: 15px;
          height: 0;
          top: 7px;
          right 13px
          border-bottom: 1px solid $c-border2;
      .d-bac
        top 19px
      .last
        background-color $cf-white
        background-position right top
        height 22px
        top 20px
      p
        margin-top 3px
        font-size 12px
        color $cf-gray4
        margin-bottom 8px
      h3
        font-size 14px
        color $cf-gray0
        word-break break-all
        .blu
          color #86d1d5
        .re
          color #ddafee
      .date
        color $cf-white
        height 24px
        width 70px
        line-height 24px
        margin-top 3px
        background $c-sub6
        text-align center
        border-radius 8px
      .date1
        height 30px
        width 90px
        line-height 30px
        span
          font-size 18px
    li
      &:first-child
        border-left 0
        &:before
          content ""
          width 1px
          height 100%
          display inline-block
          position absolute
          top 35px
          left 0
          background-color $c-border2
      &:last-child
        min-height 20px
        margin-bottom 20px
    .lable-opera li:last-child
        &:before
          content ""
          width 0
          display inline-block
  .change-log .treat2
    padding 15px 0 0 25px
  .clock
    display inline-block
    position  relative
    top  1px
    width 14px
    height 16px
    line-height 16px
    margin-right 8px
    .iconfont
      font-size 16px
  .filter-time-name
    display inline-block
    max-width 5em
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    vertical-align bottom
  .btn
    cursor pointer
    color $c-main
    padding-left 164px
    .icon-shuaxin
      display inline-block
      span
        font-size 12px
        float right
        padding-left 5px
  .next-page
    margin-bottom 20px
  .label-operatior
    max-width 8em
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    vertical-align bottom
  .change-log li.none-line:first-child:before {
    width: 0px;
  }
</style>
